<template>
	<view class="wrapper car car-safe-area">
		<u-loading-page loadingColor="#e3230e" iconSize="40" :loading="isPageLoading"></u-loading-page>
		<view style="display: none;"></view>
		<!-- <uni-icons type="checkmarkempty" size="20" color="elIconColor"></uni-icons> -->
		<!--头部-->
		<view class="car-header main-flex">
			<view class="car-header-address main-flex" @click="chooseAddress">
				<uni-icons class="car-header-address-icon" type="location" size="18" color="#333333"></uni-icons>
				<text>送至：</text>
				<text class="car-header-address-text text_line1" v-if="addressInfo?.addr">{{`${addressInfo?.addr || ''}${addressInfo?.detail || ''}`}}</text>
				<text v-else>请选择地址</text>
				<uni-icons class="car-header-address-down" type="right" size="18" color="#333333"></uni-icons>
			</view>
			<view class="car-header-collection" @click="openCollection">常购收藏</view>
			<view class="car-header-coupon" @click="openConpon">领券</view>
			<view class="car-header-del" @click="deleteCar">删除</view>
		</view>
		<!--头部-->
		<view class="car-content">
			<checkbox-group @change="checkboxChange">
			<view class="car-list">
					<uni-swipe-action>
						<view class="car-item" v-for="(item, index) in tableList" :key="item.id">
							<uni-swipe-action-item
							 :right-options="options"
							 :autoClose="false"
							 :show="item.show"
								@change="changeSwipe(item, index, $event)"
								@click="clickSwipe(item, index, $event)">
								<view class="car-item-content main-flex">
									<!-- <label class="car-item-check main-flex" @click="checkOne(item, index)">
										<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" size="48rpx" :color="item.checked ? '#e3230e' : '#c8c9cc'"></uni-icons>
									</label> -->
									<view class="car-item-check main-flex">
										<label class="car-item-check-label">
											<checkbox
												class="hidden"
												activeColor="#e3230e"
												shape="circle"
												:disabled="item.disabled"
												:value="`${item.id}`"
												hidden
												:checked="item.checked">
												<!-- <template #icon="{elIconSize, elIconColor}">
													<view class="checkbox-box main-flex" v-if="item.checked">
														<image class="checkbox-box-img" src="/static/images/checked.png"></image>
													</view>
												</template> -->
											</checkbox>
											<uni-icons v-if="item.disabled" type="smallcircle-filled" size="28" color="#d1d1d1"></uni-icons>
											<view v-else>
												<uni-icons v-if="item.checked" type="checkbox-filled" size="28" color="#e3230e"></uni-icons>
												<uni-icons v-else type="circle" size="28" color="#d1d1d1"></uni-icons>
											</view>
										</label>
									</view>
									<view class="car-item-goods main-flex-item main-flex">
										<view class="car-item-goods-img" @click="goGoods(item, index)">
											<image
												class="car-item-goods-img-url"
												mode="aspectFill"
												:src="imgUrl(item.productImg)"></image>
											<view class="car-item-goods-img-other main-flex" v-if="userStore.regionCode != item.regionCode">
												<view class="car-item-goods-img-other-tag">不在配送区</view>
											</view>
										</view>
										<view class="car-item-goods-r main-flex-item main-flex">
											<view class="car-item-goods-name" @click="goGoods(item, index)">{{item.productName}}</view>
											<view class="car-item-goods-region">配送区域：{{arrText(setStore.provinceList, item.regionCode)}}</view>
											<view class="car-item-goods-other main-flex">
												<view class="car-item-goods-price price">
													<text>￥</text>
													<text class="car-item-goods-price-num">{{moneyStr(item.productPrice)}}</text>
													<text>/{{item.unit}}</text>
												</view>
												<view class="car-item-goods-count">
													<u-number-box
														bgColor="#f5f5f5"
														integer
														inputWidth="26"
														buttonSize="24"
														:asyncChange="true"
														v-model="item.productNumber"
														@change="changeCount(item, $event)">
														<template v-slot:minus>
															<view class="minus">
																<uni-icons type="minus-filled" size="24" color="#cccccc"></uni-icons>
															</view>
														</template>
														<template v-slot:input>
															<view class="car-item-goods-count-num main-flex">{{item.productNumber}}</view>
														</template>
														<template v-slot:plus>
															<view class="plus">
																<uni-icons type="plus-filled" size="24" color="#e3230e"></uni-icons>
															</view>
														</template>
													</u-number-box>
												</view>
											</view>
										</view>
									</view>
								</view>
							</uni-swipe-action-item>
						</view>
					</uni-swipe-action>
			</view>
			</checkbox-group>
			<!--加载-->
			<view
				v-if="isNull"
				class="null main-flex">
				<u-empty text="购物车是空的哟~，快去进货吧" icon="/static/images/null.png"></u-empty>
				<view class="null-btn" @click="goBuy">去逛逛</view>
			</view>
			<view
				v-else
				class="more main-flex">
				<uni-load-more :status="status" />
			</view>
			
		</view>
		
		<!--结算-->
		<view class="car-footer">
			<view class="car-footer-box car-total main-flex">
				<view class="car-total-l main-flex-item main-flex">
					<view class="car-total-check main-flex">
						<!-- <uni-icons :type="isCheckedAll ? 'checkbox' : 'circle'" size="48rpx" color="#e3230e"></uni-icons>
						<view class="car-total-check-text">全选</view> -->
						<checkbox-group @change="checkChangeAll">
							<label class="car-total-check-label main-flex">
								<checkbox
									activeColor="#e3230e"
									shape="circle"
									label="全选"
									name="isAll"
									hidden
									value="checked"
									class="hidden"
									:checked="isCheckedAll">
								</checkbox>
								<uni-icons v-if="isCheckedAll" type="checkbox-filled" size="28" color="#e3230e"></uni-icons>
								<uni-icons v-else type="circle" size="28" color="#d1d1d1"></uni-icons>
								<view class="car-total-check-label-text">全选</view>
							</label>
						</checkbox-group>
					</view>
					<view class="car-total-info">
						<view class="car-total-money main-flex">
							<view class="car-total-money-name">合计：</view>
							<view class="car-total-money-num">
								<text class="car-total-money-num-unit">￥</text>
								<text>{{total.actualPrice ? moneyStr(total.actualPrice) : '0.00'}}</text>
							</view>
						</view>
						<view class="car-total-conpon main-flex">
							<view class="car-total-conpon-money">优惠减:￥{{total.discountPrice ? moneyStr(total.discountPrice) : '0.00'}}</view>
							<view class="car-total-conpon-other" @click="openCar">
								<text class="car-total-conpon-text">金额明细</text>
								<uni-icons type="down" size="16" color="#e3230e"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="car-total-r">
					<button class="ty-button ty-button-confirm car-total-btn" @click="settlement">立即结算({{goodsTotal}})</button>
				</view>
			</view>
		</view>
		
		<!--查看金额明细-->
		<car-popup :total="total" :showCar="showCar" @close="closeCar"></car-popup>
		<!--收藏常购-->
		<car-collection
			:showCollection="showCollection"
			:carList="tableList"
			@addCar="addCar"
			@close="closeCollection"></car-collection>
		<!--优惠券-->
		<car-conpon
			:showConpon="showConpon"
			@close="closeConpon"></car-conpon>
		<!--价格变动-->
		<goods-change
			:showGoodsChange="showGoodsChange"
			:goodsList="goodsChangeList"
			@confirm="confirmGoodsChange"
			@close="closeGoodsChange"></goods-change>
		
	</view>
</template>

<script setup>
import { computed, ref, watch, nextTick } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide, onPullDownRefresh, onUnload } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import useOrderStore from '@/store/modules/order'
import { throttle, debounce } from '@/uni_modules/uview-plus'
import { customerCarList, customerCarDelete, customerCarCount } from "@/api/app_api/car"
import { productCollectionAdd } from "@/api/app_api/product"
import { calculatProductList } from "@/api/app_api/order"
import { addressList } from "@/api/app_api/user"
import { arrText } from "@/utils/ty"
import modal from '@/plugins/modal'
import { orderTotal } from '../../api/app_api/user';
import { getMpLogin } from '@/utils/login.js'

	// 微信小程序配置：禁用样式隔离
	// defineOptions({
	//   options: {
	//     styleIsolation: 'shared' // 关键配置
	//   }
	// })

	const userStore = useUserStore()
	const setStore = useSetStore()
	const orderStore = useOrderStore()
	const isPageLoading = ref(true)
	
	// 列表查询
	const tableList = ref([])
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	const options = ref([{
			text: '收藏',
			style: {
				backgroundColor: 'rgb(254,156,1)',
				color: '#FFFFFF',
				fontSize: '24rpx'
			}
		},{
			text: '删除',
			style: {
				backgroundColor: '#e3230e',
				color: '#FFFFFF',
				fontSize: '24rpx'
			}
		}])
	
	const searchFirst = () => {
		tableList.value = []
		status.value = 'loading'
		isNull.value = false
		getList()
	}
	
	const getList = () => {
		isLoading.value = true
		// uni.showLoading({
		// 	title: '数据加载中...'
		// })
		// console.log(userStore.sellChannel)
		customerCarList({
			sellChannel: userStore.sellChannel
		}).then(res => {
			tableList.value = res.data.map(item => {
				return {
					...item,
					show: 'none',
					disabled: userStore.regionCode != item.regionCode
				}
			}) || []
			status.value = 'no-more'
			isLoading.value = false
			isPageLoading.value = false
			isNull.value = res.data.length === 0
			setChecked()
			// uni.hideLoading()
		}).catch(() => {
			isLoading.value = false
			isPageLoading.value = false
			isNull.value = false
			// uni.hideLoading()
			status.value = 'no-more'
		})
	}
	
	// 选择商品
	const showGoods = ref(false)
	const goodsInfo = ref({})
	const chooseGoods = (item) => {
		productInfo({
			sellChannel: userStore.sellChannel,
			productId: item.productId
		}).then(res => {
			if (res.data) {
				showGoods.value = true
				goodsInfo.value = res.data
			}
		})
	}
	const closeGoods = () => {
		showGoods.value = false
		goodsInfo.value = {}
	}
	
	const changeSwipe = (item, index, e) => {
		if (e !== 'none') {
			tableList.value = tableList.value.map((item, i) => {
				item.show = index == i ? e : 'none'
				return item
			})
		}
	}
	const clickSwipe = (item, index, e) => {
		if (e.index === 0 && e.position === 'right') { // 收藏
			productCollectionAddFun(item)
		} else if (e.index === 1 && e.position === 'right') { // 删除
			customerCarDeleteFun(item.id)
		}
	}
	
	const goGoods = (item, index) => {
		if (item.show === 'none') {
			uni.navigateTo({
				url: `/pages/goods/index?id=${item.productId}`
			})
		} else {
			tableList.value[index].show = 'none'
		}
	}
	
	// 管理
	const isSuccess = ref(false)
	const openAll = () => {
		isSuccess.value = true
		closeDataAll()
	}
	const closeAll = () => {
		isSuccess.value = false		
		closeDataAll()
	}
	
	const closeDataAll = () => {
		tableList.value = tableList.value.map((item, i) => {
			item.show = 'none' 
			return item
		})
	}
	
	// 选择的商品
	const chooseCarArr = ref([])
	// 选择一个
	const checkOne = (item, index) => {
		tableList.value[index].checked = !tableList.value[index]?.checked
	}
	const checkboxChange = (e) => {
		chooseCarArr.value = e.detail.value
		isChooseAll()
		setChecked()
	}
	// 全选
	const isCheckedAll = ref(false)
	const checkChangeAll = (e) => {
		isCheckedAll.value = e.detail.value?.[0] === 'checked' 
		chooseCarArr.value = isCheckedAll.value ? tableList.value.filter(item => item.regionCode == userStore.regionCode).map(item => item.id + '') : []
		setChecked()
	}
	// 判断是否全选
	const isChooseAll = () => {
		isCheckedAll.value = chooseCarArr.value.length === tableList.value.length
	}
	// 设置checked
	const setChecked = () => {
		tableList.value = tableList.value.map(item => {
			return {
				...item,
				checked: chooseCarArr.value.indexOf(item.id+'') > -1
			}
		})
		getMoney()
	}
	
	// 修改购物车数量
	const changeCount = (item, e) => {
		if (e.type === 'plus') { // 加
			customerCarCountFun({
				type: 'plus',
				id: item.id,
				sellChannel: userStore.sellChannel,
				productNumber: e.value
			}, item.checked)
		} else if (e.type === 'minus') { // 减
			customerCarCountFun({
				type: 'minus',
				id: item.id,
				sellChannel: userStore.sellChannel,
				productNumber: e.value
			}, item.checked)
		} else {
			customerCarCountFun({
				id: item.id,
				sellChannel: userStore.sellChannel,
				productNumber: e.value
			}, item.checked)
		}
	}
	
	// 修改数量
	const customerCarCountFun = (params, checked) => {
		customerCarCount(params).then(res => {
			const countFilter = tableList.value.find(i => i.id == params.id)
			if (countFilter) {
				countFilter.productNumber = params.productNumber
			}
			if (checked) {
				getMoney()
			}
		})
	}
	
	// 收藏商品
	const isCollectionAdd = ref(false)
	const productCollectionAddFun = (item) => {
		if (isCollectionAdd.value) return false
		isCollectionAdd.value = true
		productCollectionAdd({
			productId: item.productId,
			productImg: item.productImg,
			productName: item.productName,
			productPrice: item.productPrice
		}).then(res => {
			uni.$u.toast('商品已收藏')
			isCollectionAdd.value = false
			nextTick(() => {
				const oneItem = tableList.value.find(i => i.id === item.id )
				if (oneItem) {
					oneItem.show = 'none'
				}
			})
		}).catch(err => {
			isCollectionAdd.value = false
		})
	}
	
	// 删除购物车
	const isCarDel = ref(false)
	const customerCarDeleteFun = (ids) => {
		if (isCarDel.value) return false
		isCarDel.value = true
		customerCarDelete({
			id: ids
		}).then(res => {
			uni.$u.toast('商品已删除')
			isCarDel.value = false
			const delIdArr = ids.toString().split(',')
			chooseCarArr.value = chooseCarArr.value.filter(item => delIdArr.indexOf(item+'') === -1)
			getList()
		}).catch(err => {
			isCarDel.value = false
		})
	}
	// 多选删除
	const deleteCar = () => {
		const goodsCount = tableList.value.filter(item => chooseCarArr.value.indexOf(item.id+'') > -1).reduce((prev, cur, index, arr)=> {
				return prev + cur.productNumber
			}, 0)
		if (goodsCount > 0) {
			uni.showModal({
				title: '删除购物车',
				content: `是否删除所选${goodsCount}件商品？`,
				success: function (res) {
					if (res.confirm) {
						const ids = chooseCarArr.value.join(',')
						customerCarDeleteFun(ids)
					} else if (res.cancel) {
					}
				}
			})
		} else {
			uni.$u.toast('请选择商品')
		}
	}
	
	
	// 打开收藏常购
	const showCollection = ref(false)
	const openCollection = () => {
		if (!getMpLogin()) {
			return false
		}
		showCollection.value = true
	}
	const closeCollection = () => {
		showCollection.value = false
	}
	// 加入购物车
	const addCar = (res) => {
		getList()
	}
	
	// 打开优惠券
	const showConpon = ref(false)
	const openConpon = () => {
		if (!getMpLogin()) {
			return false
		}
		showConpon.value = true
	}
	const closeConpon = () => {
		showConpon.value = false
	}
	
	const goodsChangeList = ref([])
	const showGoodsChange = ref(false)
	const settlement = async () => {
		if (!getMpLogin()) {
			return false
		}
		if (chooseCarArr.value.length > 0) {
			const oldList = chooseGoodsList()
			const newGoods = await getMoney()
			goodsChangeList.value = goodsChangeFun(oldList || [], newGoods?.orderProductList || [])
			if (goodsChangeList.value.length > 0) {
				showGoodsChange.value = true
				getList()
			} else {
				total.value.orderProductList = total.value.orderProductList.map(item => {
					const goodsFilter = oldList.filter(goods => goods.productId == item.productId)
					return {
						...item,
						typeId: goodsFilter?.[0]?.typeId || ''
					}
				})
				orderStore.setGoods(total.value)
				uni.navigateTo({
					url: `/pages/order/confirm`
				})
			}
		} else {
			uni.$u.toast('请选择结算商品')
		}
	}
	const closeGoodsChange = () => {
		showGoodsChange.value = false
	}
	const confirmGoodsChange = (data) => {
		orderStore.setGoods(total.value)
		uni.navigateTo({
			url: `/pages/order/confirm`
		})
		showGoodsChange.value = false
	}
	
	// 判断价格变动
	const goodsChangeFun = (oldList, newList) => {
		return oldList ? oldList.map(item => {
			const newFilter = newList.find(item1 => item1.productId === item.productId)
			return {
				oldGoods: item,
				newGoods: newFilter || null
			}
		}).filter(item => {
			return !item.newGoods || item.newGoods.price != item.oldGoods.price
		}) : []
	}
	
	// 计算价格
	const total = ref({})
	const getMoney = () => {
		const list = chooseGoodsList()
		return new Promise((resolve, reject) => {
		  calculatProductList(list, userStore.sellChannel).then(res => {
				if (res?.data) {
					total.value = res.data
					resolve(res.data)
				} else {
					reject('信息错误')
				}
		  }).catch(err => {
				reject(err)
			})
		})
	}
	// 选择的商品信息
	const chooseGoodsList = () => {
		return tableList.value.filter(item => chooseCarArr.value.indexOf(item.id+'') > -1 && item.regionCode == userStore.regionCode).map(item => {
			return {
				moreSpec: item.moreSpec,
				number: item.productNumber,
				price: item.productPrice,
				productId: item.productId,
				productImg: item.productImg,
				productName: item.productName,
				productUnit: item.unit,
				productSpecId: item.productSpecId,
				productSpecName: item.productSpecName,
				sellChannel: userStore.sellChannel,
				typeId: item.typeId
			}
		})
	}
	
	const goodsTotal = computed(() => {
		return tableList.value.filter(item => chooseCarArr.value.indexOf(item.id+'') > -1).reduce((prev, cur, index, arr)=> {
				return prev + cur.productNumber
			}, 0)
	})
	
	// 查看明细
	const showCar = ref(false)
	const openCar = () => {
		showCar.value = true
	}
	const closeCar = () => {
		showCar.value = false
	}
	
	// 获取地址
	const addressArr = ref([])
	const addressId = ref('')
	const getAddress = () => {
		addressList().then(res => {
			addressArr.value = res.data
			addressId.value = uni.getStorageSync('addressId') || ''
		})
	}
	const addressInfo = computed(() => {
		const addressFilter1 = addressArr.value.filter(item => item.id == addressId.value)
		const addressFilter2 = addressArr.value.filter(item => item.defaultFlag === 1)
		return addressFilter1?.[0] || addressFilter2?.[0] || null
	})
	// 选择地址
	const chooseAddress = () => {
		if (!getMpLogin()) {
			return false
		}
		uni.navigateTo({
			url: '/pages/address/list?type=2'
		})
	}
	// 去看看
	const goBuy = () => {
		uni.switchTab({
			url: '/pages/category/category'
		})
	}
	
	onPullDownRefresh(() => {
		searchFirst()
		uni.stopPullDownRefresh()
	})
	
	// 监听
	watch(() => userStore.sellChannel, (newVal, oldVal) => {
		searchFirst()
	})
	watch(() => userStore.regionCode, (newVal, oldVal) => {
		if (newVal) {
			chooseCarArr.value = []
			isCheckedAll.value = false
			tableList.value = tableList.value.map(item => {
				return {
					...item,
					disabled: newVal != item.regionCode,
					checked: false
				}
			})
		}
	})
	
	onShow(() => {
		getAddress()
		getMoney()
	})
	
	onLoad(() => {
		searchFirst()
		uni.$on('addCar', () => {
			getList()
		})
	})
	onUnload(() => {
		uni.$off('addCar')
	})
	
</script>

<style lang="scss">
	.car {
		&-header {
			position: fixed;
			height: 80rpx;
			width: 100%;
			left: 0;
			background-color: #ffffff;
			z-index: 10;
			padding: 0 20rpx;
			box-sizing: border-box;
			&-address {
				font-size: 24rpx;
				&-icon {
					margin-right: 10rpx;
				}
				&-down {
					margin-left: 10rpx;
				}
				&-text {
					width: 240rpx;
				}
			}
			&-collection {
				font-size: 28rpx;
				margin-left: auto;
			}
			&-coupon {
				font-size: 28rpx;
				margin-left: 20rpx;
			}
			&-del {
				font-size: 28rpx;
				margin-left: 20rpx;
				color: $primary-color;
			}
		}
		&-content {
			padding: 80rpx 20rpx 20rpx;
		}
		&-safe-area {
			padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx); /* 兼容iOS <11.2 */
			padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx); /* 兼容iOS ≥11.2 */
		}
		&-list {
			width: 100%;
		}
		&-item {
			background-color: #ffffff;
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: 20rpx;
			&-content {
				align-items: flex-start;
				padding: 20rpx 0;
				transition: all .3s;
			}
			&-check {
				position: relative;
				width: 80rpx;
				height: 160rpx;
				box-sizing: border-box;
				justify-content: center;
				&-label {
					width: 60rpx;
					height: 60rpx;
				}
			}
			:deep(.u-checkbox__icon-wrap) {
				margin: 0 !important;
			}
			:deep(.uni-swipe_button) {
				position: relative;
				width: 120rpx;
				height: 100%;
				box-sizing: border-box;
				.uni-swipe_button-text {
					position: absolute;
					top: 50%;
					left: 50%;
					-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
					text-align: center;
				}
			}
			&-goods {
				align-items: flex-start;
				&-img {
					position: relative;
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					overflow: hidden;
					&-url {
						width: 100%;
						height: 100%;
					}
					&-other {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0rpx;
						left: 0rpx;
						background-color: rgba(255, 255, 255, .5);
						justify-content: center;
						&-tag {
							background-color: #333;
							color: #FFFFFF;
							font-size: 20rpx;
							border-radius: 50px;
							padding: 4rpx 10rpx;
						}
					}
				}
				&-r {
					min-height: 160rpx;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;
					padding: 0 12rpx;
				}
				&-name {
					width: 100%;
					font-size: 26rpx;
					font-weight: 600;
				}
				&-region {
					font-size: 24rpx;
					color: #ffffff;
					margin-top: 4rpx;
					background-color: #999999;
					border-radius: 4rpx;
					padding: 0 6rpx;
				}
				&-other {
					width: 100%;
					margin-top: 4rpx;
				}
				&-price {
					font-size: 20rpx;
					font-weight: 600;
					&-num {
						font-size: 26rpx;
					}
				}
				&-count {
					margin-left: auto;
					&-num {
						font-size: 28rpx;
						height: 24px;
						padding: 0 10rpx;
					}
				}
			}
		}
		&-footer {
			position: fixed;
			width: 100%;
			bottom: 0rpx;
			bottom: var(--window-bottom);
			left: 0;
			background-color: #ffffff;
			z-index: 10;
			&-box {
				height: 100rpx;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
			}
		}
		&-total {
			&-check {
				&-label {
					&-text {
						margin-left: 10rpx;
						font-size: 32rpx;
						line-height: 1;
					}
				}
			}
			&-r {
				margin-left: auto;
			}
			&-info {
				padding: 0 10rpx;
			}
			&-money {
				font-size: 24rpx;
				align-items: baseline;
				&-num {
					font-size: 32rpx;
					color: $primary-color;
					font-weight: 600;
					&-unit {
						font-size: 24rpx;
					}
				}
			}
			&-conpon {
				font-size: 24rpx;
				color: $text-light;
				&-text {
					margin-right: 10rpx;
				}
				&-other {
					color: $primary-color;
					margin-left: 10rpx;
				}
			}
			&-btn {
				height: 72rpx;
				padding: 0 20rpx;
				margin: 0;
				font-size: 28rpx;
				border-radius: 100px;
			}
		}
	}
	.checkbox-box {
		width: 100%;
		height: 100%;
		justify-content: center;
		&-img {
			width: 12px;
			height: 12px;
		}
	}
</style>
